<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" @click="allprintview"  icon="View">预览</el-button>
				<el-button type="primary" @click="allprintview" icon="Printer">打印</el-button>
				<sc-export :queryType="'receiving-order/empty-export'" :queryList="queryList" :fileName="'销售回瓶单'" :selectedKeys="selectedKeys"/>
			</div>
			<div class="right-panel">
				<el-button :icon="Search"   type="primary" @click="opBindData">查询</el-button>
				<el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
				<el-button text type="primary" @click="showCondition = !showCondition">
					<span v-if="!showCondition">展开</span>
					<span v-else>收起</span>
					<vab-icon class="vab-dropdown" :class="{ 'vab-dropdown-active': fold }" icon="arrow-up-s-line" />
				</el-button>
			</div>
		</el-header>
		<el-foot v-show="showCondition">
			<vab-query-form-top-panel>
				<el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px">
					<el-form-item label="单据日期" label-width="100px" sortable>
						<el-date-picker style="width: 300px" v-model="queryList.orderTime" type="datetimerange"
							value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" range-separator="-"
							unlink-panels="true" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="defaultTime"/>
					</el-form-item>
					<el-form-item label="单据编号" label-width="100px" sortable>
						<el-input placeholder="---请输入单据编号---" v-model="queryList.orderCode" style="width: 300px" />
					</el-form-item>
					<el-form-item label="客户" label-width="100px" sortable>
						<el-input placeholder="---请输入客户名称---" v-model="queryList.storeName" style="width: 300px" />
					</el-form-item>
					<el-form-item label="制单人" label-width="100px">
						<el-input placeholder="---请输入制单人---" v-model="queryList.documentsUser" style="width: 300px" />
					</el-form-item>
					<el-form-item label="修改人" label-width="100px">
						<el-input placeholder="---请输入修改人---" v-model="queryList.updateName" style="width: 300px" />
					</el-form-item>
					<el-form-item label="审核人" label-width="100px">
						<el-input placeholder="---请输入审核人---" v-model="queryList.reviewed" style="width: 300px" />
					</el-form-item>
					<el-form-item label="回瓶单" label-width="100px">
						<el-input placeholder="---请输入回瓶单---" v-model="queryList.recoveryCode" style="width: 300px" />
					</el-form-item>
					<el-form-item label="物料简码" label-width="100px">
						<el-input placeholder="---请输入物料简码---" v-model="queryList.materialSimpCode"
							style="width: 300px" />
					</el-form-item>
					<el-form-item label="物料编码" label-width="100px">
						<el-input placeholder="---请输入物料编码---" v-model="queryList.materialCode" style="width: 300px" />
					</el-form-item>
					<el-form-item label="物料分类" label-width="100px">
						<el-tree-select v-model="queryList.materialTypeIds"
							placeholder="---请选择物料分类---"
							collapse-tags
                        	collapse-tags-tooltip
							:props="{ label: 'label', value: 'value', children: 'children' }" :data="materialTypeTree"
							multiple :render-after-expand="false" show-checkbox style="width: 300px" />
					</el-form-item>
					<el-form-item label="物料名称" label-width="100px">
						<el-input placeholder="---请输入物料名称---" v-model="queryList.materialName" style="width: 300px" />
					</el-form-item>
					<el-form-item label="规格型号" label-width="100px">
						<el-input placeholder="---请输入规格型号---" v-model="queryList.materialSpecs" style="width: 300px" />
					</el-form-item>
				</el-form>
			</vab-query-form-top-panel>
		</el-foot>
		<el-main class="nopadding">
			<scTable ref="mytable" :queryType="'receiving-order/grouppages'" :data="listData" :queryList="queryList"
				:column="columnList" :orderList="OrderList" :sort-orders="['ascending', 'descending']"
				@selection-change="selectionChange"  :row-class-name="setRowClass" row-key="ReceivingOrderId" key="ReceivingOrderId" 
				show-summary remoteSummary>
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
				<el-table-column label="业务日期" prop="applyDate" width="250">
					 <template #default="scope">
						 {{ scope.row.applyDate? scope.row.applyDate.slice(0, 10):'' }}
					 </template>
				</el-table-column>
				<el-table-column label="单据编号" prop="orderCode" width="250">
					 <template #default="scope"> <span class="el-span-text" @click="opPrintview(scope.row, scope.$index)">{{scope.row.orderCode}}</span></template>
				</el-table-column>
				<el-table-column label="客户" prop="storeName" width="250"></el-table-column>
				<!-- <el-table-column label="业务员" prop="salesman" width="250"></el-table-column> -->
				<el-table-column label="制单人" prop="documentsUser" width="250"></el-table-column>
				<el-table-column label="修改人" prop="updateName" width="150"></el-table-column>
				<el-table-column label="审核人" prop="reviewed" width="150"></el-table-column>
				<!-- <el-table-column label="签收人" prop="signUser" width="250"></el-table-column> -->
				<el-table-column label="关联回瓶单" prop="recoveryCode" width="250"></el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="240">
					<template #default="scope">
						<el-button-group>
							<!-- <el-button text type="primary" size="small" @click="opCheck(scope.row, scope.$index)">核对</el-button> -->
							<el-button text type="primary" size="small" @click="opPrintview(scope.row, scope.$index)">预览</el-button>
							<el-button text type="primary" size="small" @click="opPrintview(scope.row, scope.$index)">打印</el-button>
							<el-button text type="primary" size="small" @click="opShow(scope.row, scope.$index)">查看</el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</scTable>

		</el-main>
	</el-container>
	<check-dialog v-if="dialogCheck" ref="checkDialog" @fatherMethod="opBindData" @success="handleSaveSuccess" @closed="dialogCheck = false"></check-dialog>

	<!-- 销售预览打印 -->
	<salePrint v-if="dialogPrint" ref="printDialog" @closed="dialogPrint = false"></salePrint>
</template>

<script>
	import publicjs from "@/api/model/publicjs";
	import tool from "@/utils/tool";
	import config from "@/config";
	import checkDialog from "./check"
	export default {
		components: {
			publicjs,
			checkDialog
		},
		data() {
			return {
				materialTypeTree:[],
				orgType: '',
				columnList: [],
				queryList: {
					receivingOrderType:2
				},
				selectionRows: [],
				selectedKeys:[],
				showCondition: false,
				dialogCheck: false,
				dialogPrint: false,
				defaultTime:[
					new Date(2000, 1, 1, 0, 0, 0),
					new Date(2000, 2, 1, 23, 59, 59),
				]
			}
		},
		methods: {
			resetSearch() {
				this.queryList = {};
			},
			async opBindData() {
				this.$refs.mytable.clearSort();
				this.$refs.mytable.getData();
			},
			//核对
			opCheck(row) {
				this.dialogCheck = true;
				this.$nextTick(() => {
					this.$refs.checkDialog.setData(row);
					this.$refs.checkDialog.open("Check");
				});
			},
			//查看
			opShow(row) {
				this.dialogCheck = true;
				this.$nextTick(() => {
					this.$refs.checkDialog.setData(row);
					this.$refs.checkDialog.open("Show");
				});
			},
			setRowClass({ row }) {
            if (this.selectionRows.includes(row)) {
                return "selected-row-color";
            }
            return "";
    },
			//表格选择后回调事件
			selectionChange(selection) {
				this.selectionRows = selection;
				console.log("this.selectionRows", this.selectionRows)
                this.selectedKeys= this.selectionRows.map((item)=>{ return  item.orderCode});
			},
			opPrintview(row) {
				this.dialogPrint = true;
				this.$nextTick(() => {
					var arr = [];
					arr.push(row);
					this.$refs.printDialog.setData(arr);
					this.$refs.printDialog.open("Show");
				});

			},
			allprintview() {

				if (this.selectionRows.length > 0) {
					this.dialogPrint = true;
					let uniqueArr = this.selectionRows.filter(
						(item, index, self) =>
							index ===
							self.findIndex(
								(t) => t.orderCode === item.orderCode
							)
					);
					this.$nextTick(() => {
						this.$refs.printDialog.setData(uniqueArr);
						this.$refs.printDialog.open("Show");
					});

				} else {
					this.$message.error("请选择要打印的数据");
				}

			}
		},
		async mounted() {
		    try {
			    const returnValue = await this.$API.auth.PostProcessApi.post( "material-type/tree", { status: 1 } );
			    if (returnValue.status == 200) {
				    this.materialTypeTree = returnValue.response;
			    } else {
				    this.$message.error("取物料分类失败:" + returnValue.msg);
			    }
		    } catch (error) { }
		    this.orgType = tool.data.get("USER_INFO").AccountType;
		    await this.opBindData();
	    },
	}
</script>

<style lang="scss" scoped>
/* 当表格行处于悬停状态时改变背景颜色 */
::v-deep .el-table .el-table__row:hover {
    background-color: #dae8f7;
}
::v-deep .el-table__body .el-table__row--striped.hover-row td {
    background-color: #dae8f7 !important;
}
//   斑马纹选中颜色
::v-deep .el-table__body .el-table__row--striped.selected-row-color td {
    background-color: #b8dcff !important;
}
::v-deep .el-table {
    --el-table-row-hover-bg-color: #dae8f7;
}

::v-deep .el-table tr:nth-child(2n) {
    background: #f2f2f2;
}
</style>
<style>
.el-table .selected-row-color {
    background-color: #b8dcff !important;
}
.el-table--enable-row-hover .el-table__body tr.selected-row-color:hover > td {
    background-color: #b8dcff !important;
}
.el-table__body-wrapper .el-table__body tr.selected-row-color.hover-row > td {
    background-color: #b8dcff !important;
}
.el-table__fixed-body-wrapper
    .el-table__body
    tr.selected-row-color.hover-row
    > td {
    background-color: #b8dcff !important;
}
.el-table__body-wrapper
    .el-table__body
    tr.selected-row-color.hover-row
    > .el-table__row--striped {
    background-color: #b8dcff !important;
}
</style>
